<template>
    <div class="gaofa">
        <ModalTitle title="执法事件高发区域分析" />

        <section class="page-people">
            <div class="page-people-top">
                <p>
                    <span></span>
                    <span>在线人数</span>
                    <span>{{ usersInfor.onloneNumber || 0 }}人</span>
                </p>
                <p>
                    <span></span>
                    <span>离线人数</span>
                    <span>{{ usersInfor.UnOnloneNumber || 0 }}人</span>
                </p>
            </div>
        </section>

        <section class="page-people2">
            <div class="page-people-num">
                <p>上报执法事件量（件）：</p>
                <ul>
                    <li v-for="(item, index) in shagnbaoNum" :key="index + 'a'">{{ item }}</li>
                </ul>
            </div>
        </section>

        <div id="gaofa-map" class="gaofa-map"></div>

        <div class="gaofa-example">
            <span>低</span>
            <p></p>
            <span>高</span>
        </div>
    </div>
</template>

<script>
import ModalTitle from '@/components/ModalTitle/Index.vue'
import { ZongHeZhiFaZhuanTi } from '@/api/zhangzi'

let GAOFAMAP = null;
let colorList = ['#F30006', '#FF6023', '#FF8A23', '#FFB923', '#FFD723', '#A0F311', '#80DDE5', '#79B3FF', '#A179FF', '#9195FC', '#E3E4FE', '#ffffff']
export default {
    components: {
        ModalTitle
    },

    data() {
        return {
            str: '1301429516',
            usersInfor: '',
            shagnbaoNum: '0',
            colorList
        }
    },

    mounted() {
        this.mapInit()
        this.usersInforFn()
        this.shagnbaoNumFn()
    },

    methods: {
        mapInit() {
            GAOFAMAP = new AMap.Map("gaofa-map", {
                pitch: 30,
                zoom: 11,
                rotation: 0,
                center: ['112.87795', '36.12222'],
                zooms: [2, 20],
                mapStyle: "amap://styles/dark"
            });
            this.gaofaDianweiFn()
        },

        gaofaDianweiFn() {
            ZongHeZhiFaZhuanTi.lawEnforcementIncidents().then(({ success, data, message }) => {
                if (success) {
                    // 和后台做了对接，最多12条数据
                    let markersList = []
                    // 循环创建content，在地图渲染
                    for (let i = 0; i < data.length; i++) {
                        let content = `<div style="width:  3.2rem;
                                            height:  3.2rem;
                                            background: rgba(254, 6, 27, 0.2);
                                            border-radius: 50%;
                                            display: flex;
                                            align-items: center;
                                            justify-content: center;
                                            position: absolute;">
                                        <div style="width: 1.4rem;
                                             height: 1.4rem;
                                             background: ${colorList[i]};
                                             border-radius: 50%;"></div>
                                        </div>`;
                        let arr = data[i].lonAndLat.split(',')
                        var position = new AMap.LngLat(arr[0], arr[1]);
                        var marker = new AMap.Marker({
                            position: position,
                            // 将 html 传给 content
                            content: content,
                            // 以 icon 的 [center bottom] 为原点
                            offset: new AMap.Pixel(-13, -30)
                        });
                        markersList.push(marker)
                    }
                    GAOFAMAP.add(markersList);
                    GAOFAMAP.setFitView()
                } else {
                    this.$message.error(message)
                }
            })
        },

        usersInforFn() {
            ZongHeZhiFaZhuanTi.numberOfPeopleOnline().then(res => {
                if (res.code == 200) {
                    this.usersInfor = res.data;
                }
            })
        },

        shagnbaoNumFn() {
            ZongHeZhiFaZhuanTi.totalNumberOfEvents().then(res => {
                if (res.code == 200) {
                    this.shagnbaoNum = res.data;
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.gaofa {
    width: 100%;
    height:  35.4rem;

    .page-people {
        width: 50rem;
        position: fixed;
        left:  53.9rem;
        top:  8.8rem;
        z-index: 1003;

        .page-people-top {
            display: flex;

            p {
                display: flex;
                align-items: center;

                span {
                    display: block;
                    color: #fff;

                    &:nth-child(1) {
                        width: 1rem;
                        height: 1rem;
                        background: #42AD0D;
                        border-radius: 50%;
                    }

                    &:nth-child(2) {
                        font-size: 2rem;
                        margin: 0 1.5rem;
                    }

                    &:nth-child(3) {
                        font-size: 2rem;
                        color: #42AD0D;
                    }
                }

                &:nth-child(2) {
                    margin-left: 3.8rem;

                    span {
                        &:nth-child(1) {
                            background: #FF4D40;
                        }

                        &:nth-child(3) {
                            color: #FF4D40;
                        }
                    }
                }
            }
        }
    }

    .page-people2 {
        position: fixed;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 12rem;
        left: 0;

        .page-people-num {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            p {
                font-size:  1.8rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #9ED5FF;
            }

            ul {
                display: flex;
                align-items: center;
                height: 4.4rem;
                background: url('../../../assets/images/zhangzi/zhifazhuanti/ul-bg.png') no-repeat;
                background-size: 100% 100%;
                padding: 0.6rem;

                li {
                    width: 2.4rem;
                    height:  3.2rem;
                    background: url('../../../assets/images/zhangzi/zhifazhuanti/num-bg.png') no-repeat;
                    background-size: 100% 100%;
                    font-size: 2.4rem;
                    font-family: MicrosoftYaHei;
                    color: #21D3FF;
                    text-align: center;
                    margin-right: 0.6rem;

                    &:last-child {
                        margin: 0;
                    }
                }
            }
        }
    }

    .gaofa-map {
        width: 100%;
        height:  21.1rem;
        margin-top: 1.6rem;
    }

    .gaofa-example {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 2rem;

        span {
            display: inline-block;
            font-size: 1.6rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
        }

        p {
            width:  34.9rem;
            height: 1.4rem;
            background: #fff;
            margin: 0 2rem;
            background: linear-gradient(90deg, #ffffff 0%, #040df8 20%, #74d3f8 40%, #00ff31 60%, #ffea34 80%, #fe061b 100%);
        }
    }

    .gaofa-icon {
        width:  3.2rem;
        height:  3.2rem;
        background: rgba(254, 6, 27, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;

        div {
            width: 1.4rem;
            height: 1.4rem;
            background: rgba(254, 6, 27);
            border-radius: 50%;
        }
    }
}
</style>